<template>
	<view class="login">
		<form @submit="handleClick" @reset="formReset" class="form-one">
			
			<view class="userName">
				<text class="text-sty">账号：</text>
				<input type="text" v-model="listData.account" class="input-acc">
			</view>
			<view class="userName">
				<text class="text-sty">手机号：</text>
				<input type="text" v-model="listData.tel" class="input-acc">
			</view>
			<view class="userPassword">
				<text class="text-sty">密码：</text>
				<input type="password" v-model="listData.password" class="input-acc">
			</view>
			<view class="userName">
				<text class="text-sty">邮箱：</text>
				<input type="text" v-model="listData.email" class="input-acc">
				<button type="primary" @click="obtain" class="btnLogin">获取验证码</button>
			</view>
			<view class="valCode">
				<text class="text-sty">验证码：</text>
				<input type="valCode" v-model="listData.valCode" class="input-code">
			</view>
			<button type="primary" form-type="submit" class="btnLogin">注册</button>
			<!-- <button type="default" form-type="reset">重置</button> -->
		</form>
	</view>
</template>

<script setup>
	import ajax from "../../util/request-2"
	import axios from "../../util/request-1"
	import {
		reactive,
		ref
	} from "vue"
	const listData = reactive({
		account: '',
		password: '',
		tel:"",
		email:'',
		valCode: ''
	})
	const valCode = ref()
	function obtain(){
		axios("/petsystem/user/verificationCode", {email:listData.email}, "POST").then((res) => {
			console.log(res.data.data,"返回的数据")
			uni.setStorage({
				key: "token",
				data: res.data.data,
				success: () => console.log('存储验证码token')
			})
		})
	}
	function handleClick() {
		ajax("/petsystem/user/reg", listData, "POST").then((res) => {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				uni.showToast({
					title: '注册成功',
					duration: 3000//单位毫秒
				});
			
		})
	}
</script>

<style scoped lang="scss">
	.login {
		background-color: ghostwhite;
		height: 100vh;
	}

	input {
		border: 1px solid black;
	}

	.form-one {
		width: 100%;
	}

	.userName,
	.userPassword,
	.valCode{
		padding: 30px;
		.text-sty{
			font-size: 20px;
		}
		.input-code{
			height: 50px;
		}
		.input-acc{
			padding: 10px;
			height: 50px;
		}
	}

	.valCode-one {
		position: relative;
		left: 60%;
		top: -50px;
		width: 100px;
		height: 50px;
	}

	.btnLogin {
		margin: 10 30px;
	}
</style>
